<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css"/>
    <style type="text/css">
        .header{
            background: pink;
            height: 100px;
        }
        .navStyle{
            background: lightblue;
        }
        .navStyle  a{
            color: white;
            font-size: 16px;
        }
        .formMargin{
            margin-top: 20px ;
            margin-bottom: 20px ;
        }
        .divStyle{
            background: lightgrey;
            border-right:2px solid white;
        }
        .contentHeight{
            height: 798px;
        }
        .footerStyle{
            height: 100px;
            background: #C12E2A;
        }
        .footerRowStyle{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row header">
        <div class="col-md-2 col-md-offset-2">
            <h1>WELCOME.COM</h1>
        </div>
    </div>
    <div class="row navStyle">
        <div class="col-md-8 col-md-offset-2">
            <ul class="nav nav-justified">
                <li><a href="">JAVA</a></li>
                <li><a href="">JavaScript</a></li>
                <li><a href="">HTML</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">Jquery</a></li>
            </ul>
        </div>
    </div>
    <div class="row formMargin">
        <div class="col-md-8 col-md-offset-3">
            <form class="form-inline">
                <div class="form-group">
                    <label>name</label>
                    <input type="text" class="form-control" placeholder="name"/>
                </div>
                <div class="form-group">
                    <label>password</label>
                    <input type="password" class="form-control" placeholder="password"/>
                </div>
                <div class="form-group">
                    <label class="checkbox-inline">
                        <input type="checkbox"/>Remember me
                    </label>
                </div>
                <div class="form-group">
                    <button class="btn btn-info">Sign up</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-2 divStyle">
            <div class="list-group">
                <a class="list-group-item active">
                    JAVA
                </a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
            <div class="list-group">
                <a class="list-group-item active">
                    JavaScript
                </a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
            <div class="list-group">
                <a  class="list-group-item active">
                    CSS
                </a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
            <div class="list-group">
                <a  class="list-group-item active">
                    Jquery
                </a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
        </div>
        <div class="col-md-10 divStyle contentHeight">
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <th>属性</th>
                            <th>属性值</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>background</td>
                            <td>colorName</td>
                            <td>背景色</td>
                        </tr>
                        <tr>
                            <td>background</td>
                            <td>colorName</td>
                            <td>背景色</td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="container-fluid footerStyle">
    <div class="row footerRowStyle">
        <div class="col-md-7 col-md-offset-3">
            <ul class="list-inline">
                <h4>友情链接</h4>
                <li><a href="">上海尚学堂</a></li>
                <li><a href="">百度</a></li>
                <li><a href="">饿了么</a></li>
                <li><a href="">美团外卖</a></li>
                <li><a href="">饿了么</a></li>
                <li><a href="">饿了么</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>